<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框 选中与反选</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<label for="basketball"><input type="checkbox" name="hobby" id="basketball"> 篮球</label>
<label for="football"><input type="checkbox" name="hobby" id="football"> 足球</label>
<label for="pingpangball"><input type="checkbox" name="hobby" id="pingpangball"> 乒乓球</label>
<label for="paiball"><input type="checkbox" name="hobby" id="paiball"> 排球</label>
<label for="glball"><input type="checkbox" name="hobby" id="glball"> 橄榄球</label>
<label for="blball"><input type="checkbox" name="hobby" id="blball"> 玻璃球</label>
<label for="llball"><input type="checkbox" name="hobby" id="llball"> 溜溜球</label>
<label for="tball"><input type="checkbox" name="hobby" id="tball"> 台球</label>

<br>
<input type="button" value="全选" id="a">
<input type="button" value="反选" id="b">
</body>
<script>
    $(function () {
        $("#a").click(function () {
            $("input[type=checkbox]").prop("checked", true);
        });

        $("#b").click(function () {
            let checkboxs = $("input[type=checkbox]");
            for(let i = 0; i < checkboxs .length; i ++ ){
                $(checkboxs[i]).prop("checked",  ! $(checkboxs[i]).prop("checked") )
            }
        });
    })
</script>
</html>